<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Canvas 绘制圆形</title>
</head>
<body>
 <canvas id="canvas_demo" width="800" height="800">
  您的浏览器不支持canvas，请升级浏览器。
 </canvas>
 <script>
  /** @type {HTMLCanvasElement} */
  const canvasDemo = document.getElementById('canvas_demo')
  const ctx = canvasDemo.getContext('2d')
  // ctx.arc(x, y, r, beginAngle, endAngle, counter)
  // x,y圆心的坐标
  // r 半径
  // beginAngle 开始角度
  // endAngle 结束角度
  // counter 顺时针/逆时针，true为逆，false为顺。默认为false
  ctx.arc(400, 400, 300, 0, Math.PI / 2, true)
  ctx.stroke()
  ctx.fill()
  
  // font 设置加粗，后面必须设置文字family，否则font属性不生效
  ctx.font = "bold 50px Arial"
  ctx.fillText('hello world', 100, 100)

 </script>
</body>
</html>